<template>
    <el-container>
      <el-header style="height:60px; border-bottom: 1px solid #eee;">
        <div style="float:left;width:240px;height:50px;font-size: 36px;margin-top:5px">图书检索</div>
  
        <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px;margin-right: 5%;">
          <el-button size="mini" type="primary" @click="getBookByAuthor()">作者名检索</el-button>
        </div>
        <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px;margin-right: 5%;">
          <el-button size="mini" type="primary" @click="getBookByBookType()">图书类型检索</el-button>
        </div>
        <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px;margin-right: 5%;">
          <el-button size="mini" type="primary" @click="getBookByUserName()">检索当前借阅图书</el-button>
        </div>
      </el-header>
  
      <el-main>
        <el-table :data="filteredTableData" style="width: 100%" max-height="680">
          <el-table-column
            prop="id"
            label="ID"
            min-width="15%">
          </el-table-column>       
          <el-table-column
            prop="bookName"
            label="图书名"
            min-width="15%">
          </el-table-column>
  
          <el-table-column
            prop="bookType"
            label="图书类型"
            min-width="15%">                 
          </el-table-column>
  
          <el-table-column
            prop="author"
            label="作者名"
            min-width="15%">                 
          </el-table-column>

  
        </el-table>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    name: 'BookSearch',
    data() {
      return {
        loading: false,
        search: '',
        tableData: [], // 数据源
      }
    },
    computed: {
      // 根据搜索条件过滤数据
      filteredTableData() {
        const { search, tableData } = this;
        return tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()));
      }
    },
    methods: {
      // 作者名检索
      getBookByAuthor() {
        this.$prompt('请输入作者名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /.+/,
          inputErrorMessage: '请输入作者名',
        }).then(({ value }) => {
          // 执行检索操作，根据作者名搜索图书
          this.$api.post('book/getBooksByAuthor', {"author":value}).then((res) => {                        
          if (res.code === 200) {     
               this.tableData = res.data
            } else {
              alert('获取图书数据失败!')
            }
            })
          console.log('用户输入的作者名：', value);
          // 调用后端接口进行检索，更新 tableData 数据源
        }).catch(() => {
          // 用户点击取消按钮
        });
      },
      // 图书类型检索
      getBookByBookType() {
        this.$prompt('请输入图书类型', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /.+/,
          inputErrorMessage: '请输入图书类型',
        }).then(({ value }) => {
          // 执行检索操作，根据图书类型搜索图书
          this.$api.post('book/getBooksByBookType', {"bookType":value}).then((res) => {                        
          if (res.code === 200) {     
               this.tableData = res.data
            } else {
              alert('获取图书数据失败!')
            }
            })
          console.log('用户输入的图书类型：', value);
          // 调用后端接口进行检索，更新 tableData 数据源
        }).catch(() => {
          // 用户点击取消按钮
        });
      },
      // 用户名检索
      getBookByUserName() {
        let username = window.sessionStorage.getItem('username')
        this.$api.post('book/getBooksByUserName', {"username":username}).then((res) => {                        
        if (res.code === 200) {     
             this.tableData = res.data
            //  alert(this.tableData[1].isBorrowed)
          } else {
            alert('获取图书数据失败!')
          }
          })
      },
    },
  };
  </script>